<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6-let,const关键字</title>
</head>
<body>
    <button>测试1</button>
    <br>
    <button>测试2</button>
    <br>
    <button>测试3</button>
    <br>
    <!-- let
    1.作用：
        *与var类似，用于声明一个变量
    2.特点：
        * 在块级作用域内有效
        * 不能重复声明
        * 不会预处理，不存在变量提升
    3. 应用：
        * 循环遍历加监听
        * 使用let取代var是趋势
    -->
    <script>
       let username = 'kobe'
      // let username = 'wade' //不能重复声明
       console.log(username)

       let btns = document.getElementsByTagName('button');
    //    for (var i =0;i<btns.length;i++){
    //        var btn = btns[i];
    //     //    btn.onclick = function(){
    //     //        alert(i)//都会弹出3；
    //     //    }
    //         //解决办法
    //         // (function(i){
    //         //     btn.onclick = function(){
    //         //         alert(i)//
    //         //     }
    //         // })(i)  //使用闭包的解决办法
    //    }

        for (let i =0;i<btns.length;i++){ //改为let直接搞定了
           var btn = btns[i];
           btn.onclick = function(){
               alert(i)//都会弹出3；
           }
       }
    </script>
    <!-- const关键字
    1.作用：
        定义一个常量
    2.特点：
        不能修改
        其它特点同let
    3.应用 ：
        保存不用改变的数据 -->
        <script>
            const key = "NBA";
            console.log(key)//Assignment to constant variable
        </script>
</body>
</html>